<template>
  <div class="indexPage">
    <div class="fixedBox">
      <div class="headerBox" :class="headerFix?'headerFix':''" :style="{'paddingTop': `${$headerH}'px'`}">
        <p class="headerTitle">首页</p>
        <!-- <p class="headerTxt"><span class="txt1">星际港湾节点号：</span> 2838</p> -->
      </div>
      <div class="noticeBox" @click="go('messageList')" v-if="noticeList&&noticeList.length>0">
        <div class="noticeL">
            <i></i>
            <div class="noticeList">
              <div class="subNoticeList" :class="{transition_top:animate}">
                <p v-for="(item,index) in noticeList" :key="index" class="subNotice">{{item.name}}</p>
              </div>
            </div>
        </div>
        <div class="noticeR">查看</div>
      </div>
    </div>
    <div class="indexBgBox">
      <img src="@/assets/img/goods/indexBg.png" alt="">
    </div>
    <div class="goodsBox">
      <div v-for="(item,index) in companyGoodsList" :key="index" class="subGoodsBox" @click="goGoodsDetail('goodsDetail',item)">
        <div class="subGoods">
          <div class="subGoodsT">
            <div class="subGoodsL">
              <img :src="imgPath+item.goodsCoverImg" alt="">
            </div>
            <div class="subGoodsR">
              <p class="txt2">{{item.goodsName}}</p>
              <p class="txt9">份额  {{item.goodsStock}}</p>
              <!-- <p class="money"><span class="txt4">￥</span><span class="txt5">{{item.goodsSellingPrice}}/份</span></p> -->
            </div>
          </div>
          <div class="progressBar">
            <p class="progressAll"></p>
            <p class="progressActive" :style="{ width:(item.goodsSellingStock /item.goodsStock)*6.3+ 'rem' }"></p>
          </div>
          <div class="subGoodsB flex">
            <p class="txt6" v-if="item.goodsSellingStock">合伙人招募中…</p>
            <p class="txt7" v-else>招募完成</p>
            <p>剩余份额 {{Number(item.goodsSellingStock)+'/'+item.goodsStock}}</p>
          </div>
          <p class="handlerBtn" v-if="item.goodsSellingStock">立即认购</p>
          <p class="handlerBtn disabled" v-else>认购完成</p>
        </div>
        <p class="txt8">{{item.companySubscriptionPercentage?`*星际港湾领投${item.companySubscriptionPercentage*100}%的份额`:'*参与IPFS网络，共创数字财富'}}</p>
      </div>
    </div>
  </div>
</template>


<script>
import config from "@/config/env";
export default {
  data() {
    return {
      noticeList: [],
      companyGoodsList:[],
      imgPath:'',
      animate:false,
      headerFix:false,
      appDom:null,
    };
  },
  beforeRouteLeave(to,from,next){
    if(to.name=='goodsDetail') {
      to.meta.savedPosition=0
    }
    next()
  },
  created(){
    this.getMineGoodsListFunc(true)
  },
  async activated (){
    this.imgPath = config.ossUrl;
    this.getArticleListFunc()
    this.getMineGoodsListFunc()
  },
  mounted() {
    // alert(this.$headerH)
    setTimeout(()=>{
      setInterval(this.noticeListFunc, 3000);
    },500)
    // if (window.api!=undefined&&api.systemType == 'android') {
    //   this.appDom = document.getElementById('app')
    //   this.appDom = window
    //   this.appDom.addEventListener('scroll', this.scrollToTop, true)
    // }
  },
  destroyed () {
    // if (window.api!=undefined&&api.systemType == 'android') {
    //   this.appDom.removeEventListener('scroll', this.scrollToTop)
    // }
    clearInterval(this.noticeListFunc)
  },
  methods: {
    go(name,id,storeId){
      this.$router.push({name:name})
    },
    goGoodsDetail(name,item){
      if (item.goodsSellingStock) {
        this.$router.push({name:name,query:{id:item.goodsId||undefined,storeId:item.storeId}})
      }
    },
    scrollToTop () {
      let pageYOffset = this.appDom.scrollTop 
      console.log(pageYOffset)
      if(pageYOffset>20) {
        this.headerFix=true
      } else {
        this.headerFix=false
      }
    },
    async getMineGoodsListFunc(type){
      if(type){
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration:25000
        });
      }
      let res = await this.$http.getMineGoodsList({page: 1,pageSize:50});
      if (res) {
        this.companyGoodsList=res.data.list
        this.$toast.clear()
      } else{
        this.$toast.clear()
      }
    },
    async getArticleListFunc(){
        let res = await this.$http.userArticleList({page: 1,examine:3,type:14});
        if (res) {
          this.noticeList=res.data.list
        }
    },
    noticeListFunc() {
      if(this.noticeList&&this.noticeList.length>1){
        this.animate = true;
        if(this.noticeList) {
          setTimeout(() => {
            this.noticeList.push(this.noticeList[0]);
            this.noticeList.shift();
            this.animate = false;
          }, 500);
        }
      }
    },
    
  }
};
</script>
<style scoped>
.fixedBox{
  position: fixed;
  width: 100%;
  z-index: 1;
}
.headerBox{
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222;
  box-sizing: content-box;
  /* transition: all .2s; */
}

.headerBox .headerTitle{
  font-size: 0.44rem;
  font-weight:600;
  color: #fff;
}
.headerBox .headerTxt{
  color: #02BAD6;
  font-weight:500;
}
.headerFix.headerBox{
  background-color:#222;
}
.noticeBox{
  width: 100%;
  height: 0.96rem;
  background:#02BAD6;
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem 0 0.28rem;
}
.noticeL{
  display: flex;
  align-items: center;
  height: 100%;
}
.noticeL i{
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../../assets/img/goods/icon_xiaoxi@2x.png') no-repeat;
  background-size: contain;
}

.noticeList{
  position: relative;
  width: 5rem;
  height: 100%;
  overflow: hidden;
  margin-left: 0.12rem;
}
.subNoticeList{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.subNotice{
  width: 5rem;
  line-height: 0.96rem;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.29rem;
}
.transition_top {
  transition: all 0.4s ease-out;
  margin-top: -0.96rem;
}
.indexBgBox img{
  width: 100%;
}
.goodsBox{
  margin: 0.28rem 0.28rem 1.2rem; 
  margin-top: 0.5rem;
}
.money{
  color: #F30F0F;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.txt1{
  color: #fff;
}
.txt2{
  font-size: 0.34rem;
  margin-bottom: 0.1rem;
  font-weight: 600;
}
.txt3{
  font-size: 0.26rem;
  color: #B5B5B5;
  margin-bottom: 0.15rem;
}
.txt4{
  font-size: 0.24rem;
}
.txt5{
  font-size: 0.32rem;
}
.txt6{
  font-size: 0.26rem;
  color: #F67620;
  font-weight: 600;
}
.txt7{
  font-size: 0.26rem;
  font-weight: 600;
}
.txt8{
  height: 0.72rem;
  line-height: 0.72rem;
  background: #FFFFFF;
  border-radius: 0px 0px 0.08rem 0.08rem;
  padding-left: 0.28rem;
  font-size: 0.24rem;
}
.subGoodsBox{
  margin-bottom: 0.7rem;
}
.txt9{
  font-size: 0.30rem;
  color: #F30F0F;
}
.subGoods{
  position: relative;
  padding: 0.2rem 0.36rem 0.2rem 0.28rem; 
  background:#fff;
  box-shadow: 0px 0px 0.3rem 0px rgba(210,215,229,0.5);
  border-radius:0.08rem;
}
.subGoodsT{
  display: flex;
}
.subGoodsL img{
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.08rem;
  margin-right: 0.15rem;
  margin-top: -0.7rem;
}

.handlerBtn{
  position: absolute;
  right: 0.36rem;
  top: 1rem;
  width:1.54rem;
  height: 0.64rem;
  line-height: 0.64rem;
  border-radius: 0.32rem;
  text-align: center;
  color: #fff;
  font-size:0.28rem;
  background: #00C8E7;
}
.handlerBtn.disabled{
  background: #CBCBCB;
}
.progressBar{
  margin: 0.2rem 0;
  position: relative;
}
.progressAll{
  width: 6.3rem;
  height: 0.12rem;
  background: #E5E9F1;
  border-radius: 0.05rem;
}
.progressActive{
  position: absolute;
  right: 0;
  top: 0;
  height: 0.12rem;
  background: linear-gradient(90deg, #FBAC42 0%, #F6741F 100%);
  border-radius: 0.05rem;
}
</style>
